<template>
  <div class="m-footer" v-if="footerShow">
      <ul>
          <li :class="active == 0 ? 'home-active' : 'home'" @click="goHome">首页</li>
          <li :class="active == 1 ? 'category-active' : 'category'" @click="goCategory">分类</li>
          <li :class="active == 2 ? 'shoppingcar-active' : 'shoppingcar'" @click="goShoppingcar">购物车</li>
          <li :class="active == 3 ? 'user-active' : 'user'" @click="goUser">我的</li>
      </ul>

  </div>
</template>

<script>
export default {
  name: 'Hearder',
  data () {
    return {
      active: 0,
      footerShow:true
    }
  },
  methods:{
      goHome(){
          let vm = this
          vm.active = 0
          vm.$router.push('/')
      },
      goCategory(){
          let vm = this
          vm.active = 1
          vm.$router.push('/category')
      },
      goShoppingcar(){
          let vm = this
          vm.active = 2
          vm.$router.push('/shoppingcar')
      },
      goUser(){
          let vm = this
          vm.active = 3
          vm.$router.push('/user')
      },
  },
  created () {
    let vm = this
    if(vm.$route.path == '/'){
        vm.active = 0
    }
    if(vm.$route.path == '/category'){
        vm.active = 1
    }
    if(vm.$route.path == '/shoppingcar'){
        vm.active = 2
    }
    if(vm.$route.path == '/user'){
        vm.active = 3
    }
    if(vm.$route.path == '/' || vm.$route.path == '/category' || vm.$route.path == '/shoppingcar' || vm.$route.path == '/user'){
        vm.footerShow = true
    }else{
        vm.footerShow = false
    }
  },
  watch:{
      $route(router){
          if(router.path == '/' || router.path == '/category' || router.path == '/shoppingcar' || router.path == '/user'){
              this.footerShow = true
          }else{
              this.footerShow = false
          }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .m-footer{
        position: fixed;
        bottom: 0;
        height: 3rem;
        width: 100%;
        background: #fff;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        ul{
            overflow: hidden;
            padding:0;
            margin:0;
            li{
                list-style: none;
                float: left;
                width: 25%;
                height: 3rem;
                line-height: 4rem;
                position: relative;
                text-align: center;
                font-size: 0.8rem;
            }
            .home{
                background: url('../assets/home.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .category{
                background: url('../assets/category.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .shoppingcar{
                background: url('../assets/shoppingcar.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .user{
                background: url('../assets/user.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .home-active{
                background: url('../assets/home-active.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .category-active{
                background: url('../assets/category-active.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .shoppingcar-active{
                background: url('../assets/shoppingcar-active.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
            .user-active{
                background: url('../assets/user-active.png') no-repeat center top;
                background-size: 1.5rem 1.5rem;
            }
        }
    }
</style>
